<template>
  <div class="videoAction">
    <div class = "avatar" >
      <a-avatar :src="video.user.avatar" size="large" />
      <a-icon class="avatarIcon" type="plus-circle" theme="twoTone" two-tone-color="red"/>
    </div>
    <div class="item">
      <a-icon class="icon" type = "heart" />
      </div>
    <div class="item">
      <div><a-icon class= "icon" type = "share-alt" /></div>
      <div>7</div>
    </div>
    <div class="item">
      <div><a-icon class= "icon" type = "aliwangwang" /></div>
      <div>2</div>
    </div>
    <div class="item"><a-icon class="icon" type = "message" /></div>
  </div>
</template>

<script>

export default {
  name: 'VideoAction',
  props: ['video'],
  data(){
    return {}
  },
  components: {},
  created(){},
  mounted(){},
  methods: {}
}
</script>
<style>
.videoAction {
  width: 18%;
  height: 50%;
  /* background-color: blue; */
  color: white;
  position: absolute;
  right: 0;
  top: 30%;
  text-align: center;
}
.avatar {
  position: relative;
}
.avatarIcon {
  position: absolute;
  left: 40%;
  bottom: -10%;
  color: red;
}
.item {
  text-align: center;
  margin: 10px 0;
}
.icon {
  font-size: 26px;
}
</style>
